<template>
    <el-form :model="form" label-width="auto" style="max-width: 800px">
        <el-form-item label="姓名">
            <el-input v-model="form.userName" disabled />
        </el-form-item>
        <el-form-item label="部门">
            <el-select v-model="form.departmentId" placeholder="请选择" disabled>
                <el-option v-for="item in options" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="请假类别">
            <el-checkbox-group v-model="form.leaveTypeArray">
                <el-checkbox value="事假" name="事假">事假</el-checkbox>
                <el-checkbox value="病假" name="病假">病假</el-checkbox>
                <el-checkbox value="婚假" name="婚假">婚假</el-checkbox>
                <el-checkbox value="丧假" name="丧假">丧假</el-checkbox>
                <el-checkbox value="产假" name="产假">产假</el-checkbox>
                <el-checkbox value="补休" name="补休">补休</el-checkbox>
                <el-checkbox value="工伤" name="工伤">工伤</el-checkbox>
                <el-checkbox value="其它" name="其它">其它</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="请假时间">
            <table border style="border-collapse: collapse;width: 100%;height: 100px;">
                <tr>
                    自<el-input v-model="KYear" style="width: 60px" @change="computeTime()" />年
                    <el-input v-model="KMonth" style="width: 60px" @change="computeTime()" />月
                    <el-input v-model="KDay" style="width: 60px" @change="computeTime()" />日
                    <el-input v-model="KHour" style="width: 60px" @change="computeTime()" />时至自
                    <el-input v-model="JYear" style="width: 60px" @change="computeTime()" />年
                    <el-input v-model="JMonth" style="width: 60px" @change="computeTime()" />月
                    <el-input v-model="JDay" style="width: 60px" @change="computeTime()" />日
                    <el-input v-model="JHour" style="width: 60px" @change="computeTime()" />时
                </tr>
                <tr>
                    共计
                    <el-input v-model="JsDay" style="width: 60px">{{ JsDay }}</el-input>天
                    <el-input v-model="JsHour" style="width: 60px">{{ JsHour }}</el-input>时
                </tr>
                <tr>
                    报道时间:自
                    <el-input v-model="BYear" style="width: 60px" />年
                    <el-input v-model="BMonth" style="width: 60px" />月
                    <el-input v-model="BDay" style="width: 60px" />日
                    <el-input v-model="BHour" style="width: 60px" />时
                </tr>
            </table>
        </el-form-item>
        <el-form-item label="请假事由">
            <el-input v-model="form.leaveReason" type="textarea" />
        </el-form-item>
        <el-form-item label="部门领导">
            <el-select v-model="form.departmentHeads" placeholder="请选择">
                <el-option v-for="item in userList" :label="item.userName" :value="item.userName" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const router = useRouter();
const form = reactive({
    leaveId: route.query.leaveId,
    userName: '',
    departmentId: '',
    leaveType: '',
    leaveTypeArray: [],
    leaveStartTime: '',
    leaveEndTime: '',
    reportedTime: '',
    leaveReason: '',
    departmentHeads: '',
    approvalState: false,
    totalHour: '',
    createTime: new Date(),
    isDeleted: false,
    cause: '',
})

//返填
const getBackfillLeave = () => {
    axios.get("/api/Leave/GetLeave?leaveId=" + form.leaveId)
        .then(res => {
            form.userName = res.data.data.userName
            getDepartment();
            form.departmentId = res.data.data.departmentId
            form.leaveTypeArray = res.data.data.leaveType.split(',')
            // form.leaveTypeArray=[res.data.data.leaveType]
            form.leaveStartTime = res.data.data.leaveStartTime
            form.leaveEndTime = res.data.data.leaveEndTime
            form.reportedTime = res.data.data.reportedTime
            form.leaveReason = res.data.data.leaveReason
            getUserList1();
            form.departmentHeads = res.data.data.departmentHeads
            form.approvalState = res.data.data.approvalState
            form.totalHour = res.data.data.totalHour
            form.createTime = res.data.data.createTime
            form.isDeleted = res.data.data.isDeleted
            form.cause = res.data.data.cause


            KYear.value = form.leaveStartTime.substring(0, 4)
            KMonth.value = form.leaveStartTime.substring(5, 7)
            KDay.value = form.leaveStartTime.substring(8, 10)
            KHour.value = form.leaveStartTime.substring(11, 13)
            JYear.value = form.leaveEndTime.substring(0, 4)
            JMonth.value = form.leaveEndTime.substring(5, 7)
            JDay.value = form.leaveEndTime.substring(8, 10)
            JHour.value = form.leaveEndTime.substring(11, 13)
            BYear.value = form.reportedTime.substring(0, 4)
            BMonth.value = form.reportedTime.substring(5, 7)
            BDay.value = form.reportedTime.substring(8, 10)
            BHour.value = form.reportedTime.substring(11, 13)
            JsDay.value = form.totalHour / 8
            JsHour.value = form.totalHour % 8
        })
        .catch(err => {
            console.log(err);
        })
}

const KYear = ref('')
const KMonth = ref('')
const KDay = ref('')
const KHour = ref('')
const JYear = ref('')
const JMonth = ref('')
const JDay = ref('')
const JHour = ref('')
const BYear = ref('')
const BMonth = ref('')
const BDay = ref('')
const BHour = ref('')
const JsDay = ref('')
const JsHour = ref('')

//计算请假时间
const computeTime = () => {
    let KTime = KYear.value + "-" + KMonth.value + "-" + KDay.value + " " + KHour.value + ":00:00";
    let JTime = JYear.value + "-" + JMonth.value + "-" + JDay.value + " " + JHour.value + ":00:00";

    let kdatetime = new Date(KTime);
    let jdatetime = new Date(JTime);
    //开始时间
    let KT = kdatetime.toISOString("YYYY/MM/DD hh:mm:ss")
    let KT1 = KT.substring(0, 11) + (Number(KT.substring(11, 13)) + 8).toString().padStart(2, "0") + KT.substring(13)
    form.leaveStartTime = KT1;

    //结束时间
    let JT = jdatetime.toISOString("YYYY/MM/DD hh:mm:ss")
    let JT1 = JT.substring(0, 11) + (Number(JT.substring(11, 13)) + 8).toString().padStart(2, "0") + JT.substring(13)
    form.leaveEndTime = JT1;

    let touqhourr = 0
    let currentDateTime = new Date(kdatetime);

    while (currentDateTime < jdatetime) {
        const currentHour = currentDateTime.getHours();
        if ((currentHour >= 9 && currentHour < 12) || (currentHour >= 13 && currentHour < 18)) {
            touqhourr++;
        }
        currentDateTime.setHours(currentDateTime.getHours() + 1);
    }
    form.totalHour = touqhourr;
    let num = Math.floor(touqhourr / 8)
    if (num == 0) {
        JsDay.value = 0
        JsHour.value = touqhourr
    }
    else {
        JsDay.value = num
        JsHour.value = (touqhourr - (num * 8))
    }

    if (jdatetime.getHours() >= 18) {
        let day = jdatetime.getDate() + 1
        let Month = jdatetime.getMonth() + 1
        if (Month == 1 || Month == 3 || Month == 5 || Month == 7 || Month == 8 || Month == 10 || Month == 12) {
            if (day > 31) {
                if (Month == 12) {
                    Month = 1
                } else {
                    Month += 1
                }
                day = day - 31
            }
        }
        if (Month == 4 || Month == 6 || Month == 9 || Month == 11) {
            if (day > 30) {
                Month += 1
                day = day - 30
            }
        }
        if (Month == 2) {
            if (jdatetime.getFullYear() / 100 != 0 || jdatetime.getFullYear() / 4 == 0) {
                if (day > 29) {
                    Month += 1
                    day = day - 29
                }
            } else {
                if (day > 28) {
                    Month += 1
                    day = day - 28
                }
            }
        }
        let liu = jdatetime.getFullYear() + "-" + Month + "-" + day + " " + "09:00:00"
        let kliu = new Date(liu)
        //报到时间
        let BT = kliu.toISOString("YYYY/MM/DD hh:mm:ss")
        let BT1 = BT.substring(0, 11) + (Number(BT.substring(11, 13)) + 8).toString().padStart(2, "0") + BT.substring(13)
        form.reportedTime = BT1
        BYear.value = kliu.getFullYear();
        BMonth.value = kliu.getMonth() + 1;
        BDay.value = kliu.getDate()
        BHour.value = kliu.getHours()
    } else {
        form.reportedTime = jdatetime
        BYear.value = jdatetime.getFullYear();
        BMonth.value = jdatetime.getMonth() + 1;
        BDay.value = jdatetime.getDate()
        BHour.value = jdatetime.getHours()
    }
}

//分页
const page = reactive({
    userName: '',
    pageIndex: 1,
    pageSize: 10000,
    totalCount: 0,
    totalPage: 0
})

//获取用户
const userList = ref([])
const getUserList1 = () => {
    axios.get("/api/UserInfo/GetUserAllAsync1", {
        params: {
            UserName: page.userName,
            PageIndex: page.pageIndex,
            PageSize: page.pageSize
        }
    })
        .then(res => {
            userList.value = res.data.data.list
            page.totalCount = res.data.data.totalCount
            page.totalPage = res.data.data.totalPage
            //   console.log(userList.value)
        })
        .catch(err => {
            console.log(err);
        })
}


//部门
const options = ref([])
const getDepartment = () => {
    options.value.push(
        { value: 1, label: "IT信息部" },
        { value: 2, label: "人力资源部" },
        { value: 3, label: "财务部" },
        { value: 4, label: "销售部" },
        { value: 5, label: "行政部" }
    )
}
//返填用户名称&&部门
const getDepartment1 = () => {
    axios.get("/api/UserInfo/GetDepartmrnt")
        .then(res => {
            // console.log(res.data.data)
            form.userName = res.data.data.userName
            getDepartment();
            form.departmentId = res.data.data.departmentId
        })
        .catch(err => {
            console.log(err);
        })
}



//修改
const onSubmit = () => {
    form.leaveType = form.leaveTypeArray.toString()
    console.log(form)
    axios.post("/api/Leave/UpdateLeave", form)
        .then(res => {
            if (res.data.code == 0) {
                ElMessage.success("修改成功");
                router.push("LeaveList");
            }
        })
        .catch(err => {
            console.log(err);
        })
}

onMounted(() => {
    getBackfillLeave();
})
</script>